import React, { useEffect, useState } from 'react'
import style from './style.less'
import SRC from '@/images/clves/buy.png'
import imgs from '@/images/clves/cai.png'
import Wu from '@/images/clves/weizhi.png'
import { Ellipsis } from 'antd-mobile'
import Item from './.item';
import { history } from 'umi';
interface DataDto {
    id: string;
    goodsName: string;
    shopping: string;
    menuName: string;
    unitPrice: string;
    amount: string;
    totalMoney: string;
    picture: string;
    time:string
}

export default () => {
    const [data, setData] = useState<DataDto[]>([]);
    const dataList = [
        {
            id: '1',
            goodsName: '需要萝卜 白萝卜',
            shopping: '四季化肥批发',
            menuName: '白萝卜',
            unitPrice: '3.20',
            amount: '1000000',
            totalMoney: '16000',
            picture: '',
            time:'2021-06-22'
        },
        {
            id: '2',
            goodsName: '白萝卜批发价格，优质白…',
            shopping: '四季化肥批发',
            menuName: '白萝卜',
            unitPrice: '2.20',
            amount: '1000000',
            totalMoney: '25000.50',
            picture: imgs,
            time:'2021-06-22'
        },
        {
            id: '3',
            goodsName: '璧山葡萄批发价格，优质白…',
            shopping: '四季化肥批发',
            menuName: '葡萄',
            unitPrice: '2.50',
            amount: '1000000',
            totalMoney: '25000',
            picture: imgs,
            time:'2021-06-22'
        },
    ]
    const formatter = new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    })
    const handleOk = () => {
        history.push('/finish/confirm')
    }
    useEffect(() => {
        setData(dataList)
    }, [])
    return (
        <div className={style.page}>
            <div className={style['page-list']}>
                {data.map((item) => (
                    <div
                        key={item.id}
                        className={style['list-item']}
                    >
                        <div onClick={handleOk}>
                            <div className={style['con-tt']}>
                                <img src={SRC} alt='SRC' />
                                <span>{item?.shopping}</span>
                                <span className={style.status}>{item?.time}</span>
                            </div>
                            <div className={style.con}>
                                <div className={style['con-left']}>
                                    {item?.picture ? (
                                        <img src={item?.picture} alt="商品图片" />
                                    ) : <img src={Wu} alt='无' />}
                                </div>
                                <div className={style['con-right']}>
                                    <div className={style.name}>
                                        {/* <span><Ellipsis direction='end' content={item?.goodsName}/></span> */}
                                        <span>{item?.goodsName}</span>
                                        <span>{item?.unitPrice}元/斤</span>
                                    </div>
                                    <div className={style.name}>
                                        <span className={style.type}>{item?.menuName}</span>
                                        <span className={style.weight}>×{item?.amount}斤</span>
                                    </div>
                                </div>
                            </div>
                            <div className={style.total}>
                                <span>合计金额</span>
                                <span className={style.money}>
                                    {formatter.format(Number(item?.totalMoney))}
                                </span>
                            </div>
                        </div>
                        <div>
                            <Item
                                data={{
                                    id: undefined,
                                    negotiationState: ''
                                }}
                                callback={function (): void {
                                    throw new Error('Function not implemented.')
                                }} />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
